<template>
  <div class="app-container file-list-wrapper">
    <!-- 操作按钮 -->
    <el-header class="file-list-header">
      <operation-menu
        :operation-file="operationFile"
        :selection-file="selectionFile"
        :file-path="filePath"
        :storage-value="storageValue"
        @showStorage="showStorage"
        @getTableData="getTableData"
        @showFileTreeDialog="showFileTreeDialog"
      />
    </el-header>
    <el-divider content-position="left">
      <div class="middle-wrapper">
        <!-- 面包屑导航栏 -->
        <bread-crumb class="breadcrumb" @getTableData="getTableData" @showStorage="showStorage" />
      </div>
    </el-divider>
    <!-- 文件列表表格 -->
    <file-manage-table
      ref="file_table"
      @showFileTreeDialog="showFileTreeDialog"
      @setOperationFile="setOperationFile"
      @setSelectionFile="setSelectionFile"
      @showStorage="showStorage"
      @getTableData="getTableData"
      @getImgReviewData="getImgReviewData"
    />
    <!-- 移动文件模态框 -->
    <file-tree-dialog
      ref="file_tree_dialog"
      @setSelectFilePath="setSelectFilePath"
      @confirmMoveFile="confirmMoveFile"
    />
    <!-- 查看大图 -->
    <img-review :img-review="imgReview" @getImgReviewData="getImgReviewData" />
  </div>
</template>

<script>
import { fileSize, moveFile } from '@/api/tool/file'
import ImgReview from '@/components/ImgReview'
import OperationMenu from './components/OperationMenu'
import BreadCrumb from './components/BreadCrumb'
import FileManageTable from './components/FileManageTable'
import FileTreeDialog from './components/FileTreeDialog'
import {getConfig} from "@/api/system/route";

export default {
  components: {
    OperationMenu,
    BreadCrumb,
    FileManageTable,
    FileTreeDialog,
    ImgReview
  },
  data() {
    return {
      storageValue: '0KB',
      isBatchMove: false,
      selectFilePath: '', // 移动文件路径
      operationFile: {}, // 当前操作行
      selectionFile: [], // 勾选的文件
      // 可以识别的文件类型
      fileImgTypeList: [
        'png',
        'jpg',
        'jpeg',
        'docx',
        'doc',
        'ppt',
        'pptx',
        'xls',
        'xlsx',
        'avi',
        'mp4',
        'css',
        'csv',
        'chm',
        'rar',
        'zip',
        'dmg',
        'mp3',
        'open',
        'pdf',
        'rtf',
        'txt',
        'oa',
        'js',
        'html',
        'img',
        'sql',
        'jar',
        'svg',
        'gif',
        'json',
        'exe'
      ],
      // 文件图片Map映射
      fileImgMap: {
        dir: require('@/assets/images/file/dir.png'),
        chm: require('@/assets/images/file/file_chm.png'),
        css: require('@/assets/images/file/file_css.png'),
        csv: require('@/assets/images/file/file_csv.png'),
        png: require('@/assets/images/file/file_pic.png'),
        jpg: require('@/assets/images/file/file_pic.png'),
        jpeg: require('@/assets/images/file/file_pic.png'),
        docx: require('@/assets/images/file/file_word.png'),
        doc: require('@/assets/images/file/file_word.png'),
        ppt: require('@/assets/images/file/file_ppt.png'),
        pptx: require('@/assets/images/file/file_ppt.png'),
        xls: require('@/assets/images/file/file_excel.png'),
        xlsx: require('@/assets/images/file/file_excel.png'),
        mp4: require('@/assets/images/file/file_video.png'),
        avi: require('@/assets/images/file/file_avi.png'),
        rar: require('@/assets/images/file/file_rar.png'),
        zip: require('@/assets/images/file/file_zip.png'),
        dmg: require('@/assets/images/file/file_dmg.png'),
        mp3: require('@/assets/images/file/file_music.png'),
        open: require('@/assets/images/file/file_open.png'),
        pdf: require('@/assets/images/file/file_pdf.png'),
        rtf: require('@/assets/images/file/file_rtf.png'),
        txt: require('@/assets/images/file/file_txt.png'),
        oa: require('@/assets/images/file/file_oa.png'),
        unknown: require('@/assets/images/file/file_unknown.png'),
        js: require('@/assets/images/file/file_js.png'),
        html: require('@/assets/images/file/file_html.png'),
        img: require('@/assets/images/file/file_img.png'),
        sql: require('@/assets/images/file/file_sql.png'),
        jar: require('@/assets/images/file/file_jar.png'),
        svg: require('@/assets/images/file/file_svg.png'),
        gif: require('@/assets/images/file/file_gif.png'),
        json: require('@/assets/images/file/file_json.png'),
        exe: require('@/assets/images/file/file_exe.png')
      },
      // 查看图片模态框数据
      imgReview: {
        visible: false,
        fileUrl: '',
        fileUrlArray: [],
        current: 0,
        downloadType: 'path'
      },
      imageGroupLabel: 0
    }
  },
  computed: {
    //  当前查看的文件路径
    filePath: {
      get() {
        return this.$route.query.filePath
      },
      set() {
        return '/'
      }
    }
  },
  created() {
    this.init()
  },
  methods: {
    init() {
      this.$config('storage_root_path').then(response => {
        this.$router.push({ query: { filePath: response.param }})
        this.showStorage()
        this.getTableData()
      }).catch(e => {})
    },
    getTableData() {
      this.$nextTick(() => {
        this.$refs.file_table.getTableData(true)
      })
    },
    setSelectionFile(selection) {
      this.selectionFile = selection
    },
    setOperationFile(operationFile) {
      // 当前操作行
      this.operationFile = operationFile
    },
    showFileTreeDialog(isBatchMove) {
      this.isBatchMove = isBatchMove
      this.$refs.file_tree_dialog.init()
    },
    //  设置移动后的文件路径
    setSelectFilePath(selectFilePath) {
      this.selectFilePath = selectFilePath
    },
    //  移动文件模态框-确定按钮事件
    confirmMoveFile() {
      let files = []
      if (this.isBatchMove) {
        files = this.selectionFile
      } else {
        files.push(this.operationFile)
      }
      const param = {
        newFilePath: this.selectFilePath,
        files: JSON.stringify(files)
      }
      moveFile(param).then(response => {
        this.$modal.msgSuccess(response.msg)
        this.getTableData()
      }).catch(e => {})
    },
    showStorage() {
      // 获取已占用内存
      fileSize({ key: this.filePath }).then(response => {
        const size = response.param ? response.param : 0
        const B = 1024
        const KB = Math.pow(1024, 2)
        const MB = Math.pow(1024, 3)
        const GB = Math.pow(1024, 4)
        if (!size) {
          this.storageValue = 0 + 'KB'
        } else if (size < KB) {
          this.storageValue = (size / B).toFixed(0) + 'KB'
        } else if (size < MB) {
          this.storageValue = (size / KB).toFixed(2) + 'MB'
        } else if (size < GB) {
          this.storageValue = (size / MB).toFixed(3) + 'GB'
        } else {
          this.storageValue = (size / GB).toFixed(4) + 'TB'
        }
      }).catch(e => {
        this.$modal.msgError(e)
      })
    },
    //  获取查看大图的数据
    getImgReviewData(row, visible) {
      if (row) {
        this.imgReview.fileUrl = row.path
        this.imgReview.fileName = row.originalFilename
        this.imgReview.extendName = row.contentType
      }
      this.imgReview.visible = visible
    }
  }
}
</script>

<style lang="scss" scoped>
.el-divider__text.is-left {
  left: -20px!important;
}
.file-list-wrapper {
  .file-list-header {
    .el-dialog-div {
      height: 200px;
      overflow: auto;
    }
  }
  .middle-wrapper {
    display: flex;
    .breadcrumb {
      flex: 1;
    }
    .change-image-model {
      margin-right: 20px;
      height: 30px;
      line-height: 30px;
    }
  }
}
</style>
